<template>
  <!-- <div>
    <ul class="popup-menu-list">
      <li><span>添加卡…</span></li>
      <li><span>复制列表…</span></li>
      <li><span>移动列表</span></li>
      <li><span>关注</span></li>
    </ul>
    <hr />
    <ul class="popup-menu-list">
      <li><span>移动此列表中的所有卡片…</span></li>
      <li><span>归档这个列表中的所有卡…</span></li>
    </ul>
    <hr />
    <ul class="popup-menu-list">
      <li><span>将此列表进行归档</span></li>
    </ul>
  </div> -->
  <ul class="popup-menu-list">
    <li
      v-for="item of items"
      :key="item.name"
      :class="item.seperator ? 'separator' : ''"
      @click="$emit('action', item.action)"
    >
      <span>{{ item.name }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: "PopUpMenu",

  props: {
    items: {
      type: Array,
      default() {
        //  名字，名字对应的操作，是否添加分隔符
        //  item: {name: string, action: string, seperator: boolean}
        return [];
      },
    },
  },
};
</script>

<style>
</style>